<template>
    <el-card>
        <div class="title">调课申请</div>
        <el-form ref="ruleFormRef"
                 :model="ruleForm"
                 status-icon
                 :rules="rules"
                 label-width="120px"
                 class="demo-ruleForm">
            <el-form-item prop="course" label="选择课程">
                <el-select v-model="ruleForm.courseId" placeholder="请选择课程">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                    <!-- 添加更多课程选项 -->
                </el-select>
            </el-form-item>
            <span style="display: flex;flex-direction: row">
                <el-form-item prop="originalDate" label="选择日期">
                    <el-date-picker @change="handleOriginalDate" v-model="originalDate" type="date"
                                    placeholder="选择日期"/>
                </el-form-item>
                <el-form-item prop="rescheduleDate" label="调课到日期">
                    <el-date-picker @change="handleRescheduleDate" v-model="rescheduleDate" type="date"
                                    placeholder="选择日期"/>
                </el-form-item>
                <el-form-item prop="originalWeek" label="原课程周次">
                    <el-input v-model="ruleForm.originalWeek" placeholder="填写周次"></el-input>
                </el-form-item>
                <el-form-item prop="rescheduleWeek" label="调课周次">
                    <el-input v-model="ruleForm.rescheduleWeek" placeholder="填写周次"></el-input>
                </el-form-item>
            </span>
            <span style="display: flex;flex-direction: row">
                <el-form-item style="width: 300px;" prop="originalTime" label="原课程节次">
                    <el-select v-model="ruleForm.originalTime" placeholder="填写节次">
                        <el-option label="1-2" value="1-2"/>
                        <el-option label="3-4" value="3-4"/>
                        <el-option label="5-6" value="5-6"/>
                        <el-option label="7-8" value="7-8"/>
                        <el-option label="9-10" value="9-10"/>
                        <el-option label="11-12" value="11-12"/>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 300px;" prop="rescheduleTime" label="调课节次">
                    <el-select v-model="ruleForm.rescheduleTime" placeholder="填写节次">
                        <el-option label="1-2" value="1-2"/>
                        <el-option label="3-4" value="3-4"/>
                        <el-option label="5-6" value="5-6"/>
                        <el-option label="7-8" value="7-8"/>
                        <el-option label="9-10" value="9-10"/>
                        <el-option label="11-12" value="11-12"/>
                    </el-select>
                </el-form-item>
            </span>
            <el-form-item prop="reason" label="调课理由">
                <el-input type="textarea" v-model="ruleForm.reason" placeholder="填写调课理由"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card>
        <div class="title">申请记录</div>
        <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="date"
            border
            :size="pageSize"
        >
            <el-table-column prop="requestId" label="申请编号"/>
            <el-table-column prop="courseName" label="课程名称"/>
            <el-table-column prop="teacherName" label="教师名称"/>
            <el-table-column prop="date" label="申请时间"/>
            <el-table-column prop="description" label="申请详情"/>
            <el-table-column prop="status" label="状态"/>
            <el-table-column prop="reason" label="申请原由"/>
        </el-table>
    </el-card>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus';
import {getStudentCourseChangeApplication, postStudentCourseChangeApplication} from "@/service/student/student.service";
import {DateToTimestamp, getWeekdayFromTimestamp, timestampToDate} from "@/util/time.utils";

const ruleFormRef = ref<FormInstance>()
const pageSize = ref(20)
// 页码
const originalDate = ref('')
const rescheduleDate = ref('')
const options = ref([
    {
        value: '',
        label: '',
    }])
const tableData = ref([{
    requestId: "",
    courseName: "",
    teacherName: "",
    date: "",
    description: "",
    status: "",
    reason: "",
}])

// 表单对象
interface RuleForm {
    courseId: string,
    originalDate: string,
    rescheduleDate: string,
    originalWeek: string,
    rescheduleWeek: string,
    originalTime: string,
    rescheduleTime: string,
    reason: string
}

const ruleForm = reactive<RuleForm>({
    courseId: '',
    originalDate: '',
    rescheduleDate: '',
    originalWeek: '',
    rescheduleWeek: '',
    originalTime: '',
    rescheduleTime: '',
    reason: ''
})

// 表单规则
const rules = reactive<FormRules<RuleForm>>({
    courseId: [
        {required: true, message: '课程名称不能为空', trigger: 'blur'}
    ],
    originalDate: [
        {required: true, message: '原始日期不能为空', trigger: 'blur'}
    ],
    rescheduleDate: [
        {required: true, message: '重新排定的日期不能为空', trigger: 'blur'}
    ],
    originalWeek: [
        {required: true, message: '原始周次不能为空', trigger: 'blur'}
    ],
    rescheduleWeek: [
        {required: true, message: '重新排定的周次不能为空', trigger: 'blur'}
    ],
    originalTime: [
        {required: true, message: '原始节次不能为空', trigger: 'blur'}
    ],
    rescheduleTime: [
        {required: true, message: '重新排定的节次不能为空', trigger: 'blur'}
    ],
    reason: [
        {required: true, message: '原因不能为空', trigger: 'blur'}
    ]
})


onMounted(() => {
    getStudentCourseChangeApplication((data: any) => {
        console.log(data)
        options.value = []
        tableData.value = []
        for (const info of data.courseTeacherList) {
            options.value.push({
                value: info.courseId + "-" + info.teacherId,
                label: info.courseName + "  [" + info.teacherName + "]",
            })
        }
        for (const request of data.courseChangeRequestList) {
            for (const info of data.courseTeacherList) {
                if (info.courseId == request.courseId) {
                    tableData.value.push({
                        requestId: request.requestId,
                        courseName: info.courseName,
                        teacherName: info.teacherName,
                        date: timestampToDate(request.timestamp),
                        description: "第" + request.originalWeek + "周" + getWeekdayFromTimestamp(request.originalDate) + "  " + request.originalTime + "节" + "调课到第" + request.newWeek + "周星期" + getWeekdayFromTimestamp(request.newDate) + "  " + request.newTime + "节",
                        status: request.status,
                        reason: request.reason,
                    })
                }
                options.value.push({
                    value: info.courseId + "-" + info.teacherId,
                    label: info.courseName + "  [" + info.teacherName + "]",
                })
            }
        }
    })
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(ruleForm)
            ruleForm.originalDate = String(DateToTimestamp(originalDate.value))
            ruleForm.rescheduleDate = String(DateToTimestamp(rescheduleDate.value))
            postStudentCourseChangeApplication(ruleForm, () => {
                console.log('submit!')
            })
        } else {
            console.log(ruleForm)
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

function handleOriginalDate(val: any) {
    ruleForm.originalDate = val
}

function handleRescheduleDate(val: any) {
    ruleForm.rescheduleDate = val
}
</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}
</style>